
<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<!-- option -->
<div class="ddp-wrap-grid-option ddp-clear">
  <!-- left -->
  <div class="ddp-part-left">
    <div class="ddp-data-form">
      <strong >{{totalColumnCnt | numberCommas}}</strong>
      {{'msg.comm.detail.columns' | translate}}
    </div>
    <div class="ddp-data-form">
      <strong>{{totalRowCnt | numberCommas}}</strong>
      {{'msg.comm.detail.rows' | translate}}
    </div>
    <div #typeListElement class="ddp-data-form ddp-cursor"
         (click)="toggleShowColumnTypes($event)">
      <strong >{{columnTypeCnt | numberCommas}}</strong>
      {{'msg.comm.detail.types' | translate}}
      <!-- 팝업 -->
      <div class="ddp-wrap-popup2 ddp-types"
           *ngIf="isShowColumnTypes">
        <ul class="ddp-list-popup">
          <li *ngFor="let item of columnTypeList">
            <a href="javascript:">
              <em class="{{getFieldTypeIconClass(item.label)}}"></em>
              {{item.value}}
            </a>
          </li>

        </ul>
      </div>
      <!-- //팝업 -->
    </div>
  </div>
  <!-- //left -->
  <!-- right -->
  <div class="ddp-part-right">
    <!-- search -->
    <div class="ddp-type-search">
      <input placeholder="{{'msg.storage.ui.search.data' | translate}}"
             id="gridSearch"
             [(ngModel)]="searchText"
             (keyup.enter)="searchGrid();"
             (keyup.esc)="searchGrid(true);">
      <a class="ddp-btn-delete" [ngStyle]="searchText ? {'display':'block'} : {'display':'none'}"  (click)="searchGrid(true);"></a>
    </div>
    <!-- //search -->

    <ul class="ddp-list-tab-button" style="display: none;">
      <li>
        <a href="javascript:"><em class="ddp-icon-grid"></em></a>

        <div class="ddp-ui-tooltip-info">
          <em class="ddp-icon-view-top"></em>
          그리드 뷰
        </div>

      </li>
      <li class="ddp-selected">
        <a href="javascript:"><em class="ddp-icon-listgrid"></em></a>
        <div class="ddp-ui-tooltip-info">
          <em class="ddp-icon-view-top"></em>
          리스트 뷰
        </div>

      </li>
    </ul>

    <div class="ddp-box-warning" *ngIf="isAggregationIncluded">
      <em class="ddp-icon-warning"></em>

      <div class="ddp-txt-warning">
        {{'msg.dp.ui.aggregate.warning.grid-top1' | translate }}<br>
        {{'msg.dp.ui.aggregate.warning.grid-top2' | translate }}
      </div>
    </div>
  </div>
  <!-- //right -->
</div>
<!-- //option -->
<!-- 그리드 영역 -->
<div scroll-grid-component
     class="ddp-box-gridarea"
     style="width:100%; height: 100%;"
     (selectedHeaderEvent)="gridHeaderClickHandler($event)"
     (selectedEvent)="gridRowClickHandler($event)"
     (onColumnResize)="drawChart($event)"
     (onContextMenuClick)="onContextMenuClick($event)"
     (onHeaderRowCellRendered)="onHeaderRowCellRendered($event)"
     (onGridContextCloseEvent)="gridAllContextClose()">
</div>
<div *ngIf="barChartTooltipShow"
     [style.left]="barChartTooltipPosition"
     class="ddp-ui-tooltip-info"
     style="display:block;position:fixed;top: 145px;">
  <em class="ddp-icon-view-top" style="left : 7%"></em>
  {{barChartTooltipValue}} {{barChartTooltipLabel}} {{barChartTooltipValue == '0' ? 'value' : 'values'}}
</div>
<!-- //그리드 영역 -->

<app-rule-context-menu (contextMenuItemClick)="onContextMenuItemClick($event)"></app-rule-context-menu>
